<template>
  
  <div>
      {{msg}}
      <table border="1px">
          <tr>
              <td>序号</td>
              <td>商品名称</td>
              <td>商品价格</td>
              <td>购买数量</td>
              <td>操作</td>
          </tr>
          <tr v-for="(item,index) in alist" :key="index">
              <td>{{ index+1 }}</td>
              <td>{{item.goods}}</td>
              <td>{{item.price}}</td>
              <td><button @click="add_goods(index)">+</button>{{item.amount}} <button @click="down_goods(index)">-</button></td>
              <td><button @click="remove(index)">{{item.oper}}</button></td>
          </tr>
           <tr  >
                <td colspan="5">总价 $  {{ totals }}</td>
            </tr>
     
      </table>

  </div>
</template>

<script>
export default {
    data(){
        return{
            msg:'简易版购物车',
            alist:[{"goods":"iphone8",'price':'5099','amount':1,'oper':'移除'},{"goods":"iphone xs",'price':'8699','amount':1,'oper':'移除'},{"goods":"iphone xr",'price':'6499','amount':1,'oper':'移除'}]
        }
    },
    computed:{
        

        totals:function(){
           var total = 0
           for(var i=0;i<this.alist.length;i++){
               total += this.alist[i]['price'] * this.alist[i]['amount']
           }
           return total
        }
    },
    
    methods:{
        add_goods(index){
            this.alist[index]['amount'] += 1
        },
        down_goods(index){
           
            if(this.alist[index]['amount']>1){
                this.alist[index]['amount'] -= 1
            }else{
                this.alist[index]['amount'] = 1
            }
            
        },
        remove(index){
            this.alist[index]['amount'] = 1
           
        }

    }

    }
    
</script>

<style>

</style>